<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闲芯优势物料海报</title>
    <!-- 已替换为国内CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        :root {
            --primary: #4DD6D0;
            --primary-dark: #3BA7A3;
            --primary-light: #B8F4EA;
            --primary-bg: #f0f6f9;
            --text-dark: #304455;
            --text-light: #456;
            --border-light: #e8eff3;
            --shadow-sm: 0 2px 15px rgba(0, 0, 0, 0.03);
            --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.12);
            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 12px;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--primary-bg);
            background-image: 
                linear-gradient(120deg, rgba(184, 244, 234, 0.1) 0%, rgba(207, 236, 242, 0.2) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cstyle%3E.circuit %7B stroke: %233d95a4; stroke-width: 0.5; fill: none; opacity: 0.12; %7D .component %7B stroke: %234DD6D0; stroke-width: 0.8; fill: none; opacity: 0.15; %7D .chip %7B stroke: %233d95a4; stroke-width: 0.8; fill: %234DD6D0; fill-opacity: 0.05; opacity: 0.2; %7D%3C/style%3E%3Cg class='circuit'%3E%3Cpath d='M30,30 L30,270 L270,270 L270,30 Z'/%3E%3Cpath d='M60,60 L240,60 L240,240 L60,240 Z'/%3E%3Cpath d='M30,30 L60,60'/%3E%3Cpath d='M30,270 L60,240'/%3E%3Cpath d='M270,30 L240,60'/%3E%3Cpath d='M270,270 L240,240'/%3E%3Cpath d='M30,150 L60,150'/%3E%3Cpath d='M270,150 L240,150'/%3E%3Cpath d='M150,30 L150,60'/%3E%3Cpath d='M150,270 L150,240'/%3E%3Ccircle cx='150' cy='150' r='60'/%3E%3Ccircle cx='150' cy='150' r='30'/%3E%3C/g%3E%3Cg class='component'%3E%3Crect x='90' y='90' width='40' height='20' class='chip'/%3E%3Crect x='170' y='190' width='40' height='20' class='chip'/%3E%3Cpath d='M100,90 L100,70 L130,70 L130,90'/%3E%3Cpath d='M120,210 L120,230 L180,230 L180,210'/%3E%3Ccircle cx='150' cy='150' r='5'/%3E%3Ccircle cx='180' cy='150' r='5'/%3E%3Ccircle cx='120' cy='150' r='5'/%3E%3Ccircle cx='90' cy='120' r='3'/%3E%3Ccircle cx='210' cy='180' r='3'/%3E%3Cpath d='M90,120 L120,150'/%3E%3Cpath d='M210,180 L180,150'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: repeat;
            background-attachment: fixed;
            min-height: 100vh;
            color: var(--text-dark);
        }
        
        /* Modern electronic glow effect */
        body:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(77, 214, 208, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(77, 214, 208, 0.08) 0%, transparent 50%);
            z-index: -1;
        }
        
        /* App layout */
        .app-wrapper {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Header section */
        .header {
            width: 100%;
            margin-bottom: 25px;
        }
        
        /* 优化的标题区域 */
        .title-section {
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: var(--shadow-md);
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .title-content {
            position: relative;
            z-index: 10;
            padding: 20px 0;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: white;
            margin: 0;
            padding: 0;
            font-weight: 600;
            letter-spacing: 0.5px;
            font-size: 32px;
            text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
        }
        
        .title-bg-circuit {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.15;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Ccircle cx='25' cy='25' r='5'/%3E%3Ccircle cx='75' cy='75' r='5'/%3E%3Cpath d='M25,25 L25,50 L50,50 L50,75 L75,75'/%3E%3Cpath d='M25,25 L50,25 L50,50'/%3E%3Cpath d='M75,75 L75,50 L65,50'/%3E%3Cpath d='M45,50 L30,50'/%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Crect x='65' y='45' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E");
        }
        
        .title-decoration {
            position: absolute;
        }
        
        .title-dot {
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
        }
        
        .title-dot-1 {
            top: 15px;
            left: 10%;
        }
        
        .title-dot-2 {
            bottom: 20px;
            right: 15%;
        }
        
        .title-line {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            width: 80%;
            left: 10%;
            bottom: 10px;
        }
        
        .title-chip {
            width: 60px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            top: 50%;
            right: 5%;
            transform: translateY(-50%) perspective(300px) rotateY(-20deg);
            opacity: 0.2;
        }
        
        .title-chip:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border: 1px dashed rgba(255, 255, 255, 0.5);
        }
        
        /* Main content layout */
        .main-content {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        /* Step indicator */
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
            padding: 0 10px;
        }
        
        .step-indicator::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 50px;
            right: 50px;
            height: 2px;
            background-color: #eaeef0;
            z-index: 0;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        
        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: white;
            color: var(--primary-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-bottom: 8px;
            position: relative;
            border: 2px solid var(--primary-light);
            transition: all 0.3s ease;
        }
        
        .step.active .step-number {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 5px rgba(77, 214, 208, 0.1);
        }
        
        .step-label {
            font-size: 14px;
            color: #8a9aa4;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .step.active .step-label {
            color: var(--primary-dark);
            font-weight: 500;
        }
        
        /* Left panel - Controls */
        .panel {
            background-color: rgba(255, 255, 255, 0.92);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 25px;
            flex: 1;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .panel-controls {
            min-width: 300px;
            flex: 0 0 450px;
        }
        
        .panel-preview {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 400px;
            padding: 35px 25px;
            background: rgba(250, 253, 255, 0.7);
        }
        
        .panel-heading {
            font-size: 18px;
            margin-bottom: 20px;
            color: var(--primary-dark);
            font-weight: 600;
            display: flex;
            align-items: center;
            position: relative;
            padding-bottom: 12px;
        }
        
        .panel-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .panel-heading svg {
            margin-right: 10px;
            width: 22px;
            height: 22px;
            fill: var(--primary);
        }
        
        /* Form sections */
        .form-section {
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .form-section:last-child {
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: none;
        }
        
        .form-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
        }
        
        .form-section-title .icon {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            opacity: 0.8;
            fill: var(--primary-dark);
        }
        
        .form-row {
            margin-bottom: 20px;
        }
        
        .form-row:last-child {
            margin-bottom: 0;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-light);
            font-size: 14px;
        }
        
        textarea, 
        input:not([type="file"]):not([type="color"]) {
            width: 100%;
            padding: 12px;
            box-sizing: border-box;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            font-family: inherit;
            transition: all 0.2s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
            background-color: #fcfeff;
            color: var(--text-light);
            font-size: 14px;
        }
        
        textarea:focus, 
        input:focus:not([type="file"]):not([type="color"]) {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 5px rgba(77, 214, 208, 0.2);
            background-color: #fff;
        }
        
        input[type="color"] {
            height: 44px;
            cursor: pointer;
            padding: 3px;
            width: 100%;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
        }
        
        .hint-text {
            color: #999;
        }
        
        /* File upload styling */
        .file-upload-container {
            position: relative;
            margin-bottom: 10px;
            overflow: hidden;
        }
        
        .file-upload-container input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }
        
        .file-upload-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 15px;
            background: linear-gradient(135deg, rgba(77, 214, 208, 0.08) 0%, rgba(77, 214, 208, 0.2) 100%);
            border: 1px dashed rgba(77, 214, 208, 0.6);
            border-radius: var(--radius-sm);
            color: #0c5a5a;
            font-weight: 500;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .file-upload-btn:hover {
            background: linear-gradient(135deg, rgba(77, 214, 208, 0.12) 0%, rgba(77, 214, 208, 0.25) 100%);
            border-color: rgba(77, 214, 208, 0.8);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(77, 214, 208, 0.2);
        }
        
        .file-upload-btn:active {
            transform: translateY(0);
        }
        
        .file-upload-icon {
            display: inline-block;
            margin-right: 10px;
            color: var(--primary);
            font-size: 20px;
        }
        
        .file-upload-text {
            position: relative;
            z-index: 5;
        }
        
        .file-status {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        /* Action buttons */
        .actions-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 12px 20px;
            background-color: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            border-radius: var(--radius-sm);
            font-weight: 600;
            transition: all 0.2s ease;
            box-shadow: 0 3px 8px rgba(77, 214, 208, 0.2);
            font-size: 15px;
            letter-spacing: 0.3px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        button svg {
            margin-right: 6px;
            width: 16px;
            height: 16px;
        }
        
        button:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(77, 214, 208, 0.25);
        }
        
        button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(77, 214, 208, 0.2);
        }
        
        button.secondary {
            background-color: transparent;
            color: var(--primary-dark);
            border: 1px solid var(--primary);
            box-shadow: none;
        }
        
        button.secondary:hover {
            background-color: rgba(77, 214, 208, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(77, 214, 208, 0.1);
        }
        
        /* Poster preview */
        .poster-container {
            width: 360px;
            height: 640px;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            border-radius: 4px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .poster-container:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .poster {
            width: 100%;
            height: 100%;
            background-color: var(--primary);
            position: relative;
            overflow: hidden;
        }
        
        .circuit-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.12;
            z-index: 0;
            background-image: url('');
            background-size: 90% 90%;
            background-position: center;
        }
        
        /* 添加芯片元素图层 */
        .chip-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.15;
        }
        
        .chip-element {
            position: absolute;
            background-color: #fff;
            border-radius: 1px;
        }
        
        .chip-element-1 {
            top: 15%;
            left: 10%;
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            transform: rotate(45deg);
        }
        
        .chip-element-2 {
            bottom: 25%;
            right: 10%;
            width: 15px;
            height: 30px;
            border: 1px solid #fff;
        }
        
        .chip-element-3 {
            top: 40%;
            right: 20%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #fff;
        }
        
        .chip-element-4 {
            top: 75%;
            left: 15%;
            width: 25px;
            height: 5px;
            border: 1px solid #fff;
        }
        
        .chip-connector {
            position: absolute;
            background-color: #fff;
            height: 1px;
        }
        
        .chip-connector-1 {
            top: 16%;
            left: 30%;
            width: 70px;
        }
        
        .chip-connector-2 {
            bottom: 40%;
            right: 15%;
            width: 50px;
            transform: rotate(30deg);
        }
        
        .pointer-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .dot-1 {
            top: 16%;
            left: 50%;
        }
        
        .dot-2 {
            bottom: 35%;
            right: 40%;
        }
        
        .dot-3 {
            top: 75%;
            left: 60%;
        }
        
        .poster-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .title {
            color: white;
            font-size: 28px;
            font-weight: bold;
            padding: 25px 20px 20px 20px;
            text-align: center;
            font-family: 'Arial', sans-serif;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .content-box {
            background-color: white;
            width: 90%;
            min-height: 400px;
            margin: 0 auto;
            padding: 0 20px 30px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
            border-radius: 3px;
        }
        
        .part-numbers-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 15px;
            padding-bottom: 10px;
        }
        
        .part-number {
            font-family: 'Courier New', monospace;
            font-size: 24px;
            font-weight: bold;
            margin: 8px 0;
            text-align: center;
            line-height: 1.2;
            letter-spacing: 1px;
            width: 100%;
        }
        
        .qr-code-container {
            width: 120px;
            height: 120px;
            background-color: var(--primary);
            border-radius: 10px;
            position: absolute;
            bottom: 5px;
            right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            border: 2px solid white;
            box-sizing: border-box;
            z-index: 5;
        }
        
        .qr-code-inner {
            width: 108px;
            height: 108px;
            border-radius: 5px;
            overflow: hidden;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
        }
        
        .qr-code-inner img {
            width: 100px;
            height: 100px;
            object-fit: contain;
            background-color: white;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }
        
        /* Preview panel decorative elements */
        .preview-decorations {
            position: absolute;
            z-index: -1;
            opacity: 0.4;
            pointer-events: none;
        }
        
        .preview-decoration-1 {
            width: 80px;
            height: 80px;
            border: 1px dashed var(--primary);
            border-radius: 50%;
            position: absolute;
            top: -20px;
            right: -20px;
        }
        
        .preview-decoration-2 {
            width: 40px;
            height: 40px;
            border: 1px dashed var(--primary);
            border-radius: 50%;
            position: absolute;
            bottom: -10px;
            left: -10px;
        }
        
        .preview-decoration-3 {
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* Notification */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.95);
            border-left: 4px solid var(--primary);
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            transform: translateX(calc(100% + 40px));
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification-icon {
            margin-right: 12px;
            color: var(--primary);
        }
        
        .notification-message {
            color: var(--text-dark);
            font-size: 14px;
        }
        
        /* Helper classes */
        .text-center {
            text-align: center;
        }
        
        .mt-md {
            margin-top: 20px;
        }
        
        /* Responsive design */
        @media (max-width: 1100px) {
            .main-content {
                flex-direction: column;
            }
            
            .panel-controls {
                flex: auto;
                order: 2;
            }
            
            .panel-preview {
                order: 1;
                margin-bottom: 20px;
            }
        }
        
        @media (max-width: 768px) {
            .panel {
                padding: 20px 15px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .step-label {
                font-size: 12px;
            }
            
            .poster-container {
                width: 300px;
                height: 534px;
            }
        }
        
        @media (max-width: 480px) {
            .app-wrapper {
                padding: 15px 10px;
            }
            
            .step-indicator::before {
                left: 30px;
                right: 30px;
            }
            
            .actions-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .button-group {
                width: 100%;
            }
            
            button {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <div class="app-wrapper">
        <div class="header">
            <!-- 优化的标题区域 -->
            <div class="title-section">
                <div class="title-bg-circuit"></div>
                <div class="title-decoration title-dot title-dot-1"></div>
                <div class="title-decoration title-dot title-dot-2"></div>
                <div class="title-decoration title-line"></div>
                <div class="title-decoration title-chip"></div>
                <div class="title-content">
                    <h1>闲芯优势物料海报</h1>
                </div>
            </div>
        </div>
        
        <!-- 步骤指引 -->
        <div class="step-indicator">
            <div class="step active">
                <div class="step-number">1</div>
                <div class="step-label">编辑信息</div>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-label">上传二维码</div>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <div class="step-label">生成海报</div>
            </div>
            <div class="step">
                <div class="step-number">4</div>
                <div class="step-label">下载使用</div>
            </div>
        </div>
        
        <div class="main-content">
            <!-- 左侧控制面板 -->
            <div class="panel panel-controls">
                <div class="panel-heading">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11 4H4V11H11V4Z" fill="currentColor" />
                        <path d="M20 4H13V11H20V4Z" fill="currentColor" />
                        <path d="M11 13H4V20H11V13Z" fill="currentColor" />
                        <path d="M20 13H13V20H20V13Z" fill="currentColor" />
                    </svg>
                    海报设置
                </div>
                
                <form id="poster-form">
                    <!-- 基本信息部分 -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 2H8C5.79086 2 4 3.79086 4 6V18C4 20.2091 5.79086 22 8 22H16C18.2091 22 20 20.2091 20 18V6C20 3.79086 18.2091 2 16 2Z" stroke="currentColor" stroke-width="2"/>
                                <path d="M9 11H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M9 7H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M9 15H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                            基本信息
                        </div>
                        
                        <div class="form-row">
                            <label for="title">海报标题:</label>
                            <input type="text" id="title" value="今日闲芯优势物料推荐">
                        </div>
                        
                        <div class="form-row">
                            <label for="part-numbers">优势料号 (每行一个，推荐10个):</label>
                            <textarea id="part-numbers" rows="8" class="hint-text">请输入料号...</textarea>
                        </div>
                    </div>
                    
                    <!-- 样式设置部分 -->
                    <div class="form-section">
                        <div class="form-section-title">
                            <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="currentColor" stroke-width="2"/>
                                <path d="M7 6H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M5 10H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M9 14H15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                                <path d="M11 18H13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            </svg>
                            样式设置
                        </div>
                        
                        <div class="form-row">
                            <label for="bg-color">背景颜色:</label>
                            <input type="color" id="bg-color" value="#4DD6D0">
                        </div>
                        
                        <div class="form-row">
                            <label for="qr-code-input">二维码上传:</label>
                            <!-- 美化的文件上传按钮 -->
                            <div class="file-upload-container">
                                <input type="file" id="qr-code-input" accept="image/*">
                                <div class="file-upload-btn">
                                    <span class="file-upload-icon">&#128206;</span>
                                    <span class="file-upload-text">选择文件</span>
                                </div>
                                <div class="file-status" id="file-status">未选择文件</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="actions-container">
                        <button type="button" id="reset" class="secondary">
                            <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 2v6h6"></path>
                                <path d="M3 13a9 9 0 1 0 3-7.7L3 8"></path>
                            </svg>
                            重置
                        </button>
                        
                        <div class="button-group">
                            <button type="button" id="generate">
                                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 2v4"></path>
                                    <path d="M12 18v4"></path>
                                    <path d="M4.93 4.93l2.83 2.83"></path>
                                    <path d="M16.24 16.24l2.83 2.83"></path>
                                    <path d="M2 12h4"></path>
                                    <path d="M18 12h4"></path>
                                    <path d="M4.93 19.07l2.83-2.83"></path>
                                    <path d="M16.24 7.76l2.83-2.83"></path>
                                </svg>
                                生成海报
                            </button>
                            
                            <button type="button" id="download">
                                <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="7 10 12 15 17 10"></polyline>
                                    <line x1="12" y1="15" x2="12" y2="3"></line>
                                </svg>
                                下载海报
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- 右侧预览面板 -->
            <div class="panel panel-preview">
                <!-- 装饰元素 -->
                <div class="preview-decorations">
                    <div class="preview-decoration-1"></div>
                    <div class="preview-decoration-2"></div>
                    <div class="preview-decoration-3"></div>
                </div>
                
                <div class="poster-container">
                    <div id="poster" class="poster">
                        <div class="circuit-bg"></div>
                        <!-- 芯片元素装饰层 -->
                        <div class="chip-elements">
                            <div class="chip-element chip-element-1"></div>
                            <div class="chip-element chip-element-2"></div>
                            <div class="chip-element chip-element-3"></div>
                            <div class="chip-element chip-element-4"></div>
                            <div class="chip-connector chip-connector-1"></div>
                            <div class="chip-connector chip-connector-2"></div>
                            <div class="pointer-dot dot-1"></div>
                            <div class="pointer-dot dot-2"></div>
                            <div class="pointer-dot dot-3"></div>
                        </div>
                        <div class="poster-content">
                            <div class="title" id="poster-title">今日闲芯优势物料推荐</div>
                            <div class="content-box" id="content-box">
                                <div class="part-numbers-container" id="part-numbers-container">
                                    <!-- Part numbers will be inserted here -->
                                </div>
                            </div>
                            <div class="qr-code-container" id="qr-code-container">
                                <div class="qr-code-inner">
                                    <img id="qr-code-img" src="" alt="QR Code">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 通知组件 -->
    <div class="notification" id="notification">
        <div class="notification-icon">✓</div>
        <div class="notification-message">海报生成成功！</div>
    </div>

    <script>
        // 获取DOM元素
        const titleInput = document.getElementById('title');
        const partNumbersInput = document.getElementById('part-numbers');
        const bgColorInput = document.getElementById('bg-color');
        const qrCodeInput = document.getElementById('qr-code-input');
        const generateButton = document.getElementById('generate');
        const downloadButton = document.getElementById('download');
        const resetButton = document.getElementById('reset');
        const poster = document.getElementById('poster');
        const posterTitle = document.getElementById('poster-title');
        const contentBox = document.getElementById('content-box');
        const partNumbersContainer = document.getElementById('part-numbers-container');
        const qrCodeImg = document.getElementById('qr-code-img');
        const qrCodeContainer = document.getElementById('qr-code-container');
        const fileStatus = document.getElementById('file-status');
        const notification = document.getElementById('notification');
        const steps = document.querySelectorAll('.step');
        
        // 添加"请输入料号..."文本框自动清除功能
        const defaultHintText = "请输入料号...";
        let hasEditedPartNumbers = false;
        
        // 初始化步骤
        let currentStep = 0;
        
        // 更新步骤指示器
        function updateStepIndicator(stepIndex) {
            steps.forEach((step, index) => {
                if (index <= stepIndex) {
                    step.classList.add('active');
                } else {
                    step.classList.remove('active');
                }
            });
        }
        
        // 点击文本框时，如果还是默认文本则清空
        partNumbersInput.addEventListener('focus', function() {
            if (partNumbersInput.value === defaultHintText && !hasEditedPartNumbers) {
                partNumbersInput.value = '';
                partNumbersInput.classList.remove('hint-text');
            }
            updateStepIndicator(0);
        });
        
        // 粘贴文本时，清除默认提示并设置标记
        partNumbersInput.addEventListener('paste', function() {
            if (partNumbersInput.value === defaultHintText) {
                // 等待粘贴完成后再清除默认文本
                setTimeout(function() {
                    hasEditedPartNumbers = true;
                    partNumbersInput.classList.remove('hint-text');
                }, 10);
            }
        });
        
        // 监听输入变化
        partNumbersInput.addEventListener('input', function() {
            if (partNumbersInput.value !== defaultHintText) {
                hasEditedPartNumbers = true;
                partNumbersInput.classList.remove('hint-text');
            }
            // 如果输入框内容被全部删除，重置状态但不恢复默认提示
            if (partNumbersInput.value === '') {
                hasEditedPartNumbers = true;
            }
        });
        
        // 增强二维码图像处理
        qrCodeInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                // 更新文件状态显示
                fileStatus.textContent = '已选择: ' + file.name;
                fileStatus.style.color = '#4DD6D0';
                
                // 更新步骤指示器到步骤2
                updateStepIndicator(1);
                
                const reader = new FileReader();
                reader.onload = function(event) {
                    // 预加载图像以优化显示
                    const img = new Image();
                    img.onload = function() {
                        // 检查图像尺寸
                        if (img.width < 200 || img.height < 200) {
                            alert("上传的二维码图像分辨率较低，可能影响识别效果。建议使用高清晰度二维码图像。");
                        }
                        
                        // 设置图像源
                        qrCodeImg.src = event.target.result;
                        
                        // 自动生成更新海报
                        generatePoster();
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 重置表单
        resetButton.addEventListener('click', function() {
            // 确认是否重置
            if (confirm('确定要重置所有设置吗？')) {
                titleInput.value = '今日闲芯优势物料推荐';
                partNumbersInput.value = defaultHintText;
                partNumbersInput.classList.add('hint-text');
                hasEditedPartNumbers = false;
                bgColorInput.value = '#4DD6D0';
                fileStatus.textContent = '未选择文件';
                fileStatus.style.color = '#666';
                qrCodeImg.src = '';
                // 重新生成海报
                generatePoster();
                // 重置步骤指示器
                updateStepIndicator(0);
                // 显示通知
                showNotification('已重置所有设置');
            }
        });
        
        // 显示通知
        function showNotification(message) {
            const notificationMessage = document.querySelector('.notification-message');
            notificationMessage.textContent = message;
            notification.classList.add('show');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 生成海报预览
        function generatePoster() {
            // 更新标题
            posterTitle.textContent = titleInput.value;
            
            // 更新背景颜色
            const bgColor = bgColorInput.value;
            poster.style.backgroundColor = bgColor;
            qrCodeContainer.style.backgroundColor = bgColor;
            
            // 更新料号列表
            partNumbersContainer.innerHTML = '';
            
            // 如果是默认提示文本，则不显示在海报中
            let partNumbers = [];
            if (partNumbersInput.value !== defaultHintText) {
                partNumbers = partNumbersInput.value.split('\n').filter(line => line.trim() !== '');
            }
            
            // 根据料号数量调整字体大小和间距 - 优化为10个左右
            let fontSize = 22; // 默认字体大小
            let margin = 8; // 默认间距
            
            if (partNumbers.length > 10) {
                fontSize = 19;
                margin = 6;
            }
            
            if (partNumbers.length > 13) {
                fontSize = 16;
                margin = 4;
            }
            
            // 创建并添加料号元素
            partNumbers.forEach(part => {
                const partElement = document.createElement('div');
                partElement.className = 'part-number';
                partElement.textContent = part.trim();
                partElement.style.fontSize = `${fontSize}px`;
                partElement.style.margin = `${margin}px 0`;
                partNumbersContainer.appendChild(partElement);
            });
            
            // 更新步骤指示器到步骤3
            updateStepIndicator(2);
            
            // 显示成功通知
            showNotification('海报生成成功！');
        }
        
        // 下载海报为图片，使用更高质量设置
        function downloadPoster() {
            // 显示进度提示
            const downloadNotice = document.createElement('div');
            downloadNotice.style.position = 'fixed';
            downloadNotice.style.top = '50%';
            downloadNotice.style.left = '50%';
            downloadNotice.style.transform = 'translate(-50%, -50%)';
            downloadNotice.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            downloadNotice.style.color = 'white';
            downloadNotice.style.padding = '20px';
            downloadNotice.style.borderRadius = '5px';
            downloadNotice.style.zIndex = '1000';
            downloadNotice.textContent = '正在生成高质量海报...';
            document.body.appendChild(downloadNotice);
            
            // 更新步骤指示器到步骤4
            updateStepIndicator(3);
            
            // 延迟执行确保UI更新
            setTimeout(() => {
                // 增加图像质量选项
                const options = {
                    scale: 3, // 提高到3倍分辨率
                    useCORS: true,
                    backgroundColor: null,
                    logging: false,
                    allowTaint: true,
                    imageTimeout: 0, // 不超时
                    removeContainer: true
                };
                
                html2canvas(poster, options).then(canvas => {
                    // 创建临时画布以优化二维码渲染
                    const tempCanvas = document.createElement('canvas');
                    const ctx = tempCanvas.getContext('2d');
                    tempCanvas.width = canvas.width;
                    tempCanvas.height = canvas.height;
                    
                    // 绘制主要内容
                    ctx.drawImage(canvas, 0, 0);
                    
                    // 提高二维码区域的清晰度
                    ctx.imageSmoothingEnabled = false;
                    
                    // 生成下载链接
                    const link = document.createElement('a');
                    link.download = '闲芯优势物料推荐.png';
                    link.href = tempCanvas.toDataURL('image/png', 1.0);
                    
                    // 移除提示并触发下载
                    document.body.removeChild(downloadNotice);
                    link.click();
                    
                    // 显示成功通知
                    showNotification('海报已成功下载！');
                }).catch(error => {
                    console.error('海报生成出错:', error);
                    document.body.removeChild(downloadNotice);
                    alert('海报生成失败，请重试。');
                });
            }, 100);
        }
        
        // 添加事件监听器
        generateButton.addEventListener('click', generatePoster);
        downloadButton.addEventListener('click', downloadPoster);
        
        // 标题输入监听
        titleInput.addEventListener('focus', function() {
            updateStepIndicator(0);
        });
        
        // 背景颜色选择监听
        bgColorInput.addEventListener('input', function() {
            // 保持当前步骤但更新海报
            generatePoster();
        });
        
        // 初始生成一次海报
        generatePoster();
        
        // 初始化第一个步骤为活跃状态
        updateStepIndicator(0);
    </script>
</body>
</html>